<!-- @format -->

<template>
  <view class="container">
    <view class="main">
      <view class="empty" v-if="addressList.length == 0">
        <view class="img">
          <image src="http://jiales.gz-yami.com/addr.png" lazy-load></image>
        </view>
        <view class="txt">您还没有收货地址</view>
      </view>
      <radio-group class="radio-group">
        <block v-for="item in addressList">
          <view class="address">
            <view class="personal" @click="selAddrToOrder($event)" :data-item="item">
              <view class="info-tit">
                <text class="name">{{ item.receiver }}</text>
                <text class="tel">{{ item.mobile }}</text>
                <image src="../../static/icon/revise.png" lazy-load @click.stop="toEditAddress($event)"
                  :data-addrid="item.addrId"></image>
              </view>
              <view class="addr">
                <text class="addr-get">
                  {{ item.province }}{{ item.city }}{{ item.area
                  }}{{ item.addr }}
                </text>
              </view>
            </view>
            <view class="select-btn">
              <view class="box">
                <label @click="onDefaultAddr($event)" :data-addrid="item.addrId">
                  <radio :value="item.prodId" :checked="item.commonAddr == 1" color="#eb2444" />设为默认地址
                </label>
              </view>
            </view>
          </view>
        </block>
      </radio-group>
    </view>
    <view class="footer" @click="onAddAddr($event)">
      <text>新增收货地址</text>
    </view>
  </view>
</template>

<script>
import { request } from "../../utils/http.js";
export default {
  data() {
    return {
      defaultSize: "mini",
      disabled: false,
      plain: true,
      loading: false,
      addressList: [],
      addAddress: "",
      order: -1,
    };
  },
  onLoad: function (option) {
    if (option.order) {
      this.order = option.order;
    }
  },
  methods: {
    //新增收货地址
    onAddAddr: function (e) {
      uni.navigateTo({
        url: "/pages/editAddress/editAddress",
      });
    },

    //设置为默认地址
    onDefaultAddr: function (e) {
      var addrId = e.currentTarget.dataset.addrid;
      console.log(addrId);
      var ths = this;
      uni.showLoading();
      var params = {
        url: "/p/address/defaultAddr/" + addrId,
        method: "PUT",
        data: {
          addrId: addrId,
        },
        callBack: function (res) {
          uni.hideLoading();
        },
      };
      request(params);
    },

    //加载地址列表
    onShow: function () {
      var ths = this;
      uni.showLoading();

      var params = {
        url: "/p/address/list",
        method: "GET",
        data: {},
        callBack: function (res) {
          //console.log(res)
          ths.addressList = res;
          uni.hideLoading();
        },
      };

      request(params);
    },

    // 修改地址
    toEditAddress: function (e) {
      var addrId = e.currentTarget.dataset.addrid;
      uni.navigateTo({
        url: "/pages/editAddress/editAddress?addrId=" + addrId,
      });
    },

    /**
     * 选择地址 跳转回提交订单页
     */
    selAddrToOrder: function (e) {
      if (this.order == 0) {
        var pages = getCurrentPages(); //当前页面
        var prevPage = pages[pages.length - 2]; //上一页面
        prevPage.item = e.currentTarget.dataset.item;
        prevPage.selAddress = "yes";
        uni.navigateBack({
          //返回
          delta: 1,
        });
      }
    },
  },
};
</script>

<style>
/* pages/delivery-address/delivery-address.wxss */

page {
  background-color: #f4f4f4;
  border-top: 2rpx solid #e9eaec;
  padding-bottom: 150rpx;
}

.main {
  margin-top: 20rpx;
}

.address {
  margin-bottom: 15rpx;
  width: 100%;
  background-color: #fff;
  border-bottom: 2rpx solid #e9eaec;
}

.address .personal {
  position: relative;
  padding: 20rpx 30rpx;
  border-bottom: 3rpx dashed #e9eaec;
}

.address .personal .info-tit .name {
  margin-right: 30rpx;
  font-size: 32rpx;
  display: inline-block;
}

.address .personal .info-tit .tel {
  font-size: 30rpx;
}

.address .personal .info-tit image {
  position: absolute;
  right: 30rpx;
  top: 46rpx;
  width: 40rpx;
  height: 40rpx;
  margin-left: 50rpx;
  vertical-align: middle;
}

.personal .addr {
  font-size: 26rpx;
  margin: 10rpx 0;
}

.personal .addr .addr-get {
  display: inline-block;
  color: #999;
  width: 100%;
  word-break: break-word;
}

.address .select-btn {
  padding: 15rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.address .select-btn .box {
  font-size: 26rpx;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 -1rpx 8rpx rgba(0, 0, 0, 0.05);
}

.footer text {
  font-size: 32rpx;
  color: #eb2444;
}

.empty .img {
  text-align: center;
  margin-top: 130rpx;
}

.empty .img image {
  width: 100rpx;
  height: 100rpx;
  display: block;
  margin: auto;
}

.empty .txt {
  margin-top: 30rpx;
  font-size: 24rpx;
  text-align: center;
  color: #999;
}
</style>
